<template>
	<view>
		<u-navbar :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight">
			<view class="u-nav-slot text-bold text-white flex" slot="left">
				<u-icon name="arrow-left" size="23" color="#ffffff"></u-icon>
				<view class="margin-left-xs font-20">抢购专区</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="flex align-center w-100">
					<view class="bg-white flex align-center radius-25 padding-lr w-100">
						<view class="margin-right-sm flex align-center" @click="toSearch">
							<image src="/static/index/search.png" class="search"></image>
						</view>
						<u-input type="text" v-model="keyword" border="none" placeholder='搜商品' class="search-text"
							@confirm="toSearch" />
					</view>
					<view class="margin-left flex align-center">
						<image src="/static/index/kefu.png" class="img-49" @click="onlineService"></image>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="text-center padding-bottom">
			<image src="/static/product/qg-bg.png" mode="widthFix" class="w-100"></image>
		</view>
		<view class="flex bg-white radius-5 margin-bottom-sm padding font-10 margin-lr"  v-for="(item, index) in productList" :key="index" @click="toProductDetails(item)">
			<view>
				<image :src="item.mainImageUrl"
				class="img-180 radius-7"></image>
			</view>
			<view class="flex justify-between flex-direction margin-left-sm flex-grow">
				<view class="font-15 text-bold text-cut2 pro-name">{{item.productName}}</view>
				<view class="flex justify-between align-center">
					<view class="flex">
						<view>
							<text class="font-13 text-theme">￥</text>
							<text class="font-16 text-theme text-bold">{{item.productPrice}}</text>
						</view>
						<view class="gxz-lable margin-left-lg" v-if="item.contributionValue">{{item.contributionValue}}积分</view>
					</view>
					<view class="text-black6 bg-theme padding-lr-lg p-tb-7 text-white radius-25" @click.stop="toBuy(item)">购买</view>
				</view>
				
			</view>
		</view>
		<u-loadmore :status="status" class="padding-bottom padding-top-xs"/>
	</view>
</template>

<script>
	import {
		productList
	} from '@/common/api/product.js'
	import onlineServiceMixin from '@/common/mixins/onlineServiceMixin.js'
	export default {
		mixins: [
			onlineServiceMixin
		],
		data() {
			return {
				areaId: '',
				keyword: '',
				productList: [],
				pageNo: 0,
				status: 'loading',
			};
		},
		onLoad(options) {
			this.areaId = options.areaId
			this.getProductList()
		},
		onReachBottom() {
			this.getProductList()
		},
		methods: {
			reset() {
				this.productList = []
				this.pageNo = 0
			},
			toSearch() {
				this.reset()
				this.getProductList()
			},
			toBuy(item) {
				// uni.navigateTo({
				// 	url: '/pages/order/placeOrder?productId=' + item.productId + '&areaId=' + this.areaId
				// })
				uni.navigateTo({
					url: '/pages/product/productDetails?productId=' + item.productId
				})
			},
			toProductDetails(item) {
				uni.navigateTo({
					url: '/pages/product/productDetails?productId=' + item.productId
				})
			},
			getProductList() {
				this.status = 'loading'
				this.pageNo++
				productList({cateId: this.cateId, areaId: this.areaId, pageNo: this.pageNo, pageSize: 10, keyword: this.keyword}).then(res => {
					this.productList = this.productList.concat(res.data)
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-navbar__content__right {
		width: 66% !important;
	}
	.search {
		width: 29rpx;
		height: 33rpx;
	}

	.search-text {
		width: 100%;
		height: 66rpx;
	}
	.gxz-lable {
		border: 2rpx solid #FF0000;
		border-radius: 8rpx;
		color: #FF0000;
		padding: 2rpx 8rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
	}
</style>